<template>
  <div class="empty-box">
    <div class="empty-in-box">
      <slot name="icon">
        <n-icon v-if="showIcon" :size="iconSize" color="#c2c2c2" :component="iconComponent" />
      </slot>
      <slot name="description">
        <span v-if="showDescription" class="des-text" :style="{ fontSize: descriptionSize }">{{ description }}</span>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue';
import { FileExclamationOutlined } from '@vicons/antd';

defineOptions({
  name: 'EmptyTips'
});

withDefaults(
  defineProps<{
    iconSize?: string;
    showIcon?: boolean;
    iconComponent?: Component;
    descriptionSize?: string;
    description?: string;
    showDescription?: boolean;
  }>(),
  {
    iconSize: '50px',
    showIcon: true,
    iconComponent: FileExclamationOutlined,
    descriptionSize: '14px',
    description: '无数据',
    showDescription: true
  }
);
</script>

<style lang="scss" scoped>
.empty-box {
  width: 100%;
  height: 100%;
  display: flex;
  .empty-in-box {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .des-text {
      color: #c2c2c2;
    }
  }
}
</style>
